import React, {Component} from 'react'
import {Button} from "primereact/button";
import AddressInfoDialog from "../dialog/AddressInfoDialog";
import {Dialog} from "primereact/dialog";

export default class AddressBook extends Component {

    constructor() {
        super();
        this.state = {
            infoVisible: false,
        }
    }


    render() {
        let bookList = [
            {name: "张三", address: [{address: "yuanyouliaaa"}, {address: "zuowen123123"}], remark: "他可能是个大户"},
            {name: "李四", address: [{address: "yuanyouliaaa"}, {address: "zuowen123123"}], remark: "他可能是个大户"},
            {name: "王五", address: [{address: "yuanyouliaaa"}, {address: "zuowen123123"}], remark: "他可能是个大户"},
            {name: "赵六", address: [{address: "yuanyouliaaa"}, {address: "zuowen123123"}], remark: "他可能是个大户"},
            {name: "张三", address: [{address: "yuanyouliaaa"}, {address: "zuowen123123"}], remark: "他可能是个大户"},
            {name: "李四", address: [{address: "yuanyouliaaa"}, {address: "zuowen123123"}], remark: "他可能是个大户"},
            {name: "王五", address: [{address: "yuanyouliaaa"}, {address: "zuowen123123"}], remark: "他可能是个大户"},
            {name: "赵六", address: [{address: "yuanyouliaaa"}, {address: "zuowen123123"}], remark: "他可能是个大户"},
        ];

        let nodeList = bookList && bookList.map((val, i) => {

            return (
                <tr key={i}>

                    <td className="p-g-2">{val.name}</td>
                    <td className="p-g-7">{val.address[0].address}</td>
                    <td className="p-g-3">
                        <Button style={{marginRight: "5px", width: "100px"}} className="p-button-success"
                                onClick={() => this.setState({infoVisible: true})} label="查看"/>
                        <Button label="删除" className="p-button-warning" style={{width: "100px"}}/>
                    </td>
                </tr>
            )

        })
        return (
            <div>
                <div className="card p-g-12">
                    <table className="p-g-12">
                        <tr className="p-g-12">
                            <th style={{textAlign: "left"}} className="p-g-2">名称</th>
                            <th style={{textAlign: "left"}} className="p-g-7">地址</th>
                        </tr>
                        {nodeList}
                    </table>
                </div>

                <Dialog visible={this.state.infoVisible}
                        modal={true}
                        header="查看地址本"
                        width={700}
                        onHide={() => this.setState({infoVisible: false})}>
                    <AddressInfoDialog/>
                </Dialog>

            </div>
        )
    }
}